<template>
  <div class="follow-main">
    <div class="follow-header follow-header-info">
      <div class="breadcrumb flex-c-s">
        <p class="item cur">互相关注</p>
      </div>
    </div>
    <div class="follow-content section">
      <div class="content" style="padding-bottom: 10px">
        <ul class="relation-list">
          <li
            class="list-item clearfix relative"
            v-for="follow in followList"
            :key="follow.uid"
          >
            <div class="cover-container">
              <a href="/">
                <img
                  style="height: 60px; width: 60px"
                  class="avatar fit-cover"
                  :src="follow.avatar"
                />
              </a>
            </div>
            <div class="content flex col">
              <a href="" class="title">
                <span class="name">{{ follow.name }}</span>
              </a>
              <p class="desc">
                {{ follow.description }}
              </p>
              <div class="action flex flex-ac">
                <button
                  @click="handleCancleFollow(follow.uid)"
                  style="margin-right: 1rem"
                  class="but jb-pink"
                >
                  取消关注
                </button>
                <button @click="handleMessage(follow.uid)" class="jb-blue but">
                  私信
                </button>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getFriendList, follow } from "@/api/user";
import { useRouter } from "vue-router";
import { message } from "@/utils/message";

const followList = ref<Fans[]>([]);

const router = useRouter();

const handleMessage = (id: number) => {
  router.push({
    path: "/message",
    query: {
      targetId: id,
    },
  });
};

const handleCancleFollow = async (id: number) => {
  const result = await follow(id, 1);
  if (result.data.code === 200) {
    message({
      type: "success",
      message: "取消关注成功",
      duration: 2000,
    });
    const result = await getFriendList();
    if (result.data.code === 200) {
      followList.value = result.data.data;
    }
  }
};

onMounted(async () => {
  const result = await getFriendList();
  if (result.data.code === 200) {
    followList.value = result.data.data;
  }
});
</script>

<style scoped lang="scss">
.list-item {
  position: relative;
  height: fit-content;
  display: flex;

  .content {
    .title {
      margin-bottom: 10px;
      font-size: 16px;
      line-height: 19px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .desc {
      color: #6d757a;
      overflow: hidden;
      white-space: nowrap;
      width: 100%;
      text-overflow: ellipsis;
      padding-right: 10px;
      line-height: 20px;
      font-size: 12px;
    }
  }

  .action {
    position: absolute;
    right: 0;
    top: 45%;
  }
}

.cover-container {
  height: 60px;
  widows: 60px;
  margin-right: 20px;
}
</style>
